<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=Bs0HDvUqWnyUBz3v7xcqF85InPazf81o">
    </script>
    <title>跑步中</title>
</head>

<body>
    <div class="app_runing dpflex fdcolumn fff">
        
        <!-- 跑步蒙层 -->
        <div class="runing_mask maskAll">
            <p class="center">
                3
            </p>
        </div>

        <!-- 地图蒙层 -->
        <div class="runingmap maskAll">
            <!-- 返回按钮 -->
            <i class="iconfont icon-prev goback"></i>
            <!-- 地图 -->
            <div id="bdMap"></div>
            <!-- 导航栏信息 -->
            <div class="nav">
                <p>户外跑</p>
                <!-- 信息 -->
                <div class="navdata dpflex">
                    <p><span>配速</span><span class="f26 minkm1">99'99</span></p>
                    <p><span>用时</span><span class="f26 runing_time1">00:00:00</span></p>
                    <p><span>卡路里</span><span class="f26">48</span></p>
                </div>
            </div>
        </div>
        
        <!-- 放音乐盒子 -->
        <div class="music dpflex jcs">
            <p>运动中</p>
            <p class="icon"><i class="iconfont icon-map2"></i></p>
        </div>

        <!-- 公里数盒子 -->
        <div class="km">
            <p><span class="km_data">00.00</span>公里</p>
        </div>

        <!-- 去到地图 -->
        <div class="gps">
            <p>GPS信号低XXXX-------------------- <i class="iconfont icon-map2" id="gps"></i></p>
        </div>

        <!-- 运动数据显示 -->
        <div class="movement_data dpflex fdcolumn mt60">
            <!-- 图标区域 -->
            <div class="icon dpflex">
                <p><i class="iconfont icon-speed f20"></i> <span>配速</span> <span class="runing_data minkm">--</span></p>
                <p><i class="iconfont icon-time f20"></i> <span>用时</span> <span
                        class="runing_data runing_time">00:00:00</span></p>
                <p><i class="iconfont icon-calorie f20"></i> <span>卡路里</span> <span class="runing_data">84</span></p>
            </div>
        </div>
        <!-- 暂停运动 -->
        <div class="pauseruning dpflex ret">
            <!-- 暂停 -->
            <div class="btnBox dpflex fdcolumn pause">
                <i class="iconfont icon-play f50"></i>
                <p>暂停</p>
            </div>

            <div class="Box dpflex">
                <!-- 继续 -->
                <div class="go btnBox dpflex fdcolumn">
                    <i class="iconfont icon-pause f50"></i>
                    <p>继续</p>
                </div>

                <!-- 结束 -->
                <div class="end btnBox dpflex fdcolumn">
                    <i class="iconfont icon-end f50"></i>
                    <p>结束</p>
                </div>
            </div>

        </div>

        

    </div>
</body>

</html>